<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useNav } from "@/layout/hooks/useNav";
const { username, logout } = useNav();
import { getHistory } from "@/api/ie";
import { ElMessage } from "element-plus";

const tableData = ref([]);
const showDetailDialog = ref(false);
const text = ref("");
const detail = ref([]);

onMounted(() => {
  getHistory({ username: username.value })
    .then(res => {
      if (res["code"] != 0) {
        ElMessage({
          type: "error",
          message: res["detail"]
        });
        return;
      }
      console.log(res["history"]);
      tableData.value = res["history"];
    })
    .catch(error => {
      console.log(error);
      if (error.response?.status == 401) {
        ElMessage({
          type: "error",
          message: "登录过期"
        });
        logout();
      }
    });
});

const showDetail = index => {
  showDetailDialog.value = true;
  text.value = tableData.value[index]["text"];
  detail.value = tableData.value[index]["detail"];
};
</script>

<template>
  <div>
    <el-table :data="tableData" max-height="350">
      <el-table-column prop="id" label="抽取记录的id" />
      <el-table-column prop="record_time" label="抽取日期" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="showDetail(scope.$index)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="showDetailDialog"
      title="抽取详情"
      width="400"
      height="500"
    >
      原文本
      <el-input autosize type="textarea" :placeholder="text" disabled />
      抽取结果
      <el-input
        v-for="(it, i) in detail"
        autosize
        type="textarea"
        :placeholder="
          JSON.stringify(it[0], null, '\t')
            .replaceAll('probability', '置信度')
            .replaceAll('text', '文本内容')
            .replaceAll('start', '原文开始位置')
            .replaceAll('end', '原文结束位置')
        "
        disabled
      />
    </el-dialog>
  </div>
</template>
